<template>
  <div class="app-layout">
    <div class="head-layout">{{title}}</div>
    <div class="main-layout">
      <NuxtLoadingIndicator />
      <NuxtLayout>
        <NuxtPage />
      </NuxtLayout>
    </div>
    <div class="footer-layout">
      <div class="func-list">
        <NuxtLink  class="func-item" v-for="(item,index) in list" :key="index" :to="item.path" @click="gotoHandler(item)">
          <div class="func-label">{{ item.label }}</div>
          <div class="func-icon">
            <img :src="item.icon" alt="">
          </div>
        </NuxtLink >
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
interface FooterBar {
  label: string;
  prop: string;
  icon: string;
  selectIcon: string;
  isSelect: boolean;
  path: string;
}

const title = ref<string>("首页");

const list = ref<FooterBar[]>([
  {
    label: "首页",
    prop: "home",
    icon: "",
    selectIcon: "",
    isSelect: true,
    path: "/"
  },
  {
    label: "视频",
    prop: "video",
    icon: "",
    selectIcon: "",
    isSelect: false,
    path: "/video"
  },
  {
    label: "社区",
    prop: "common",
    icon: "",
    selectIcon: "",
    isSelect: false,
    path: "/common"
  },
  {
    label: "关于",
    prop: "about",
    icon: "",
    selectIcon: "",
    isSelect: false,
    path: "/about"
  }
]);

const gotoHandler = (item: FooterBar) => {
  title.value = item.label;
};
</script>

<style scoped lang="scss">
html,
body {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}

#__nuxt {
  width: 100%;
  height: 100%;
}
.app-layout {
  width: 100%;
  height: 100%;
  .head-layout,
  .footer-layout {
    height: 50px;
    width: 100%;
    background-color: pink;
  }
  .head-layout {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .main-layout {
    width: 100%;
    height: calc(100% - 100px);
    overflow-x: hidden;
    overflow-y: auto;
  }
  .footer-layout {
    overflow: hidden;
    .func-list {
      width: 100%;
      height: 100%;
      padding: 2px 4px;
      display: flex;
      align-items: center;
      justify-content: space-around;
      .func-item {
        width: 49px;
        height: 100%;
        color: #303030;
        text-decoration: none;
      }
    }
  }
}
</style>
